<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业碳管理系统精简架构（当前状态）</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e5a8c',
                        secondary: '#3598db',
                        accent: '#27ae60',
                        neutral: '#f5f7fa',
                        dark: '#2c3e50',
                        pending: '#f39c12', // 待开发/规划中
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .architecture-box {
                @apply rounded-lg shadow-md transition-all duration-300 hover:shadow-lg;
            }
            .layer-title {
                @apply text-lg font-bold mb-3 pb-2 border-b border-gray-200;
            }
            .component-item {
                @apply p-3 mb-2 rounded bg-white/80 border border-gray-100 hover:border-primary/30 transition-colors;
            }
            .component-pending {
                @apply p-3 mb-2 rounded bg-white/80 border border-pending/30 hover:border-pending/50 transition-colors;
            }
            .connection-line {
                @apply h-6 w-0.5 bg-gray-300 mx-auto my-1;
            }
            .pending-label {
                @apply text-xs inline-block px-2 py-0.5 rounded bg-pending/10 text-pending ml-2;
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen p-4 md:p-8">
    <div class="max-w-6xl mx-auto">
        <!-- 架构标题 -->
        <div class="text-center mb-10">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary mb-2">企业碳管理系统精简架构</h1>
            <p class="text-gray-600">当前状态：PC端优先 | 基础数据支撑 | Flask技术栈</p>
        </div>

        <!-- 架构图容器 -->
        <div class="relative">
            <!-- 1. 前端应用层（仅PC） -->
            <div class="architecture-box bg-white p-6 mb-4">
                <div class="layer-title flex items-center text-primary">
                    <i class="fa fa-desktop mr-2"></i>
                    前端应用层（PC端）
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="component-item">
                        <div class="font-semibold text-dark">碳数据采集界面</div>
                        <p class="text-sm text-gray-600 mt-1">业务数据手工录入、表格导入功能</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">碳管理工作台</div>
                        <p class="text-sm text-gray-600 mt-1">核算管理、减排跟踪、履约管理核心操作</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">基础报表系统</div>
                        <p class="text-sm text-gray-600 mt-1">数据汇总报表、简单趋势图表、数据导出</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">系统管理模块</div>
                        <p class="text-sm text-gray-600 mt-1">用户权限、基础配置、操作日志</p>
                    </div>
                    <div class="component-pending">
                        <div class="font-semibold text-dark">决策分析仪表盘 <span class="pending-label">规划中</span></div>
                        <p class="text-sm text-gray-600 mt-1">碳排放趋势分析、多维度对比（待开发）</p>
                    </div>
                    <div class="component-pending">
                        <div class="font-semibold text-dark">移动应用端 <span class="pending-label">未开发</span></div>
                        <p class="text-sm text-gray-600 mt-1">移动端适配、移动审批（暂未规划）</p>
                    </div>
                </div>
            </div>

            <div class="connection-line"></div>

            <!-- 2. 业务服务层（Flask后端） -->
            <div class="architecture-box bg-secondary/10 p-6 mb-4">
                <div class="layer-title flex items-center text-secondary">
                    <i class="fa fa-cogs mr-2"></i>
                    业务服务层（Flask应用）
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="component-item">
                        <div class="font-semibold text-dark">数据管理服务</div>
                        <p class="text-sm text-gray-600 mt-1">数据录入校验、存储管理、基础清洗</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">碳核算服务</div>
                        <p class="text-sm text-gray-600 mt-1">基础核算逻辑、因子管理、结果计算</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">报表生成服务</div>
                        <p class="text-sm text-gray-600 mt-1">固定报表模板、数据填充、格式转换</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">用户与权限服务</div>
                        <p class="text-sm text-gray-600 mt-1">身份认证、角色管理、操作授权</p>
                    </div>
                    <div class="component-pending">
                        <div class="font-semibold text-dark">减排管理服务 <span class="pending-label">待扩展</span></div>
                        <p class="text-sm text-gray-600 mt-1">减排项目跟踪、效益评估（基础框架）</p>
                    </div>
                    <div class="component-pending">
                        <div class="font-semibold text-dark">碳资产服务 <span class="pending-label">未开发</span></div>
                        <p class="text-sm text-gray-600 mt-1">配额管理、交易决策（暂未实现）</p>
                    </div>
                </div>
            </div>

            <div class="connection-line"></div>

            <!-- 3. 数据层（基础数据） -->
            <div class="architecture-box bg-primary/10 p-6 mb-4">
                <div class="layer-title flex items-center text-primary">
                    <i class="fa fa-database mr-2"></i>
                    数据层（当前数据范围）
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="component-item">
                        <div class="font-semibold text-dark">业务数据库</div>
                        <p class="text-sm text-gray-600 mt-1">MySQL/PostgreSQL：存储手工录入的碳数据</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">系统基础数据</div>
                        <p class="text-sm text-gray-600 mt-1">组织架构、用户信息、基础配置参数</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">基础因子库</div>
                        <p class="text-sm text-gray-600 mt-1">内置常用排放因子、计算参数</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">文件存储</div>
                        <p class="text-sm text-gray-600 mt-1">上传的原始凭证、生成的报表文档</p>
                    </div>
                    <div class="component-pending">
                        <div class="font-semibold text-dark">时序数据库 <span class="pending-label">未使用</span></div>
                        <p class="text-sm text-gray-600 mt-1">IoT设备数据存储（待IoT集成后启用）</p>
                    </div>
                    <div class="component-pending">
                        <div class="font-semibold text-dark">数据仓库 <span class="pending-label">规划中</span></div>
                        <p class="text-sm text-gray-600 mt-1">历史数据归档、分析模型（数据量增长后考虑）</p>
                    </div>
                </div>
            </div>

            <div class="connection-line"></div>

            <!-- 4. 技术平台层（Python+Flask） -->
            <div class="architecture-box bg-primary/20 p-6 mb-4">
                <div class="layer-title flex items-center text-primary">
                    <i class="fa fa-code mr-2"></i>
                    技术平台层（当前技术栈）
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="component-item">
                        <div class="font-semibold text-dark">Flask框架</div>
                        <p class="text-sm text-gray-600 mt-1">Web应用开发、路由管理、模板渲染</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">Python脚本</div>
                        <p class="text-sm text-gray-600 mt-1">核算逻辑实现、数据处理、报表生成</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">HTML/CSS/JS</div>
                        <p class="text-sm text-gray-600 mt-1">前端页面渲染、基础交互、表单处理</p>
                    </div>
                </div>
            </div>

            <div class="connection-line"></div>

            <!-- 5. 基础设施层 -->
            <div class="architecture-box bg-dark/5 p-6 mb-4">
                <div class="layer-title flex items-center text-dark">
                    <i class="fa fa-server mr-2"></i>
                    基础设施层
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="component-item">
                        <div class="font-semibold text-dark">应用服务器</div>
                        <p class="text-sm text-gray-600 mt-1">部署Flask应用的服务器/虚拟机</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">数据库服务器</div>
                        <p class="text-sm text-gray-600 mt-1">运行MySQL/PostgreSQL的数据库服务</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">基础网络</div>
                        <p class="text-sm text-gray-600 mt-1">局域网访问、基础安全防护</p>
                    </div>
                </div>
            </div>

            <!-- 横切关注点 -->
            <div class="architecture-box bg-accent/10 p-6 mt-6">
                <div class="layer-title flex items-center text-accent">
                    <i class="fa fa-shield mr-2"></i>
                    当前重点关注
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="component-item">
                        <div class="font-semibold text-dark">数据准确性</div>
                        <p class="text-sm text-gray-600 mt-1">录入校验规则、数据审核流程、计算逻辑验证</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">系统易用性</div>
                        <p class="text-sm text-gray-600 mt-1">简化录入流程、优化表单设计、完善操作指引</p>
                    </div>
                    <div class="component-item">
                        <div class="font-semibold text-dark">未来扩展性</div>
                        <p class="text-sm text-gray-600 mt-1">预留IoT接口、数据模型可扩展、服务模块化</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 架构说明 -->
        <div class="mt-10 bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-bold text-primary mb-4">当前架构说明</h2>
            <ul class="list-disc pl-5 space-y-2 text-gray-700">
                <li><span class="font-semibold">聚焦核心</span>：优先实现PC端基础功能，围绕手工数据录入与核算展开</li>
                <li><span class="font-semibold">技术精简</span>：基于Python+Flask+HTML的轻量架构，降低开发与维护成本</li>
                <li><span class="font-semibold">数据现状</span>：以业务录入数据和系统基础数据为主，暂未引入IoT时序数据</li>
                <li><span class="font-semibold">扩展预留</span>：标注"待开发"模块，为未来集成IoT、扩展移动端和决策分析功能预留空间</li>
                <li><span class="font-semibold">当前重点</span>：优先保障数据准确性和系统易用性，为后续扩展奠定基础</li>
            </ul>
        </div>
    </div>
</body></html>